<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06-图片切换-简易版</title>
<style type="text/css">

	*{
		padding:0;
		margin:50px auto;
	}

	#box{
		border:1px solid #ccc;
		height: 288px;
		width: 700px;
		padding-top: 200px;
		background:url('images/banner1.jpg') no-repeat;
	}
	
	ul li{
		display: inline-block;;
		margin-right:15px;
	}
	
	img{
		width: 118px;
		height: 120px;
		border: 1px solid red;
	}


</style>
</head>
<body >

<div id="box">
	<ul>
		<li class="item">
			<img src="images/banner1.jpg" alt="">
		</li >

		<li class="item">
			<img src="images/banner2.jpg" alt="">
		</li>

		<li class="item">
			<img src="images/banner3.jpg" alt="">
		</li>

		<li class="item">
			<img src="images/banner4.jpg" alt="">
		</li>

		<li class="item">
			<img src="images/banner5.jpg" alt="">
		</li>

	</ul>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	


//获取事件源
	function $(id){
		return typeof id === 'string' ? document.getElementById(id):null
	}
	

	var items = document.getElementsByClassName('item')

	for(var i=0; i<items.length; i++){

		var item = items[i]
		item.id=i+1
		console.log(item.id)

		items[i].onmouseover = function(){
			console.log(this.id)//打印对应图片的下标
			$('box').style.background = "url('images/banner${this.id}.jpg') no-repeat"
		}
	}






</script>

	
</body>
</html>